<template>
	<div class="ph-dropdown" @mouseenter="onEnter" @mouseleave="onLeave" ref="edropdown">
		<ph-button 
			v-if="simple"
			class="ph-dropdown-handle"
			:disabled="disabled"
			:type="type"
			:icon="icon||'caret-down'"
			:shape="shape"
			@click="onClick">{{title}}</ph-button>
		<ph-button 
			v-else
			class="ph-dropdown-handle"
			:disabled="disabled"
			:iconRight="showRightIcon?'caret-down':''"
			:type="type"
			:icon="icon"
			:iconRightFixed="true"
			:shape="shape"
			@click="onClick">{{title}}</ph-button>
		<transition :name="animation" v-if="state.hover">
			<ph-list v-if="!disabled&&visible" 
				type="button"
				:mini="true"
				:nowrap="true"
				:align="align"
				ref="edropdownlist"
				:style="style" 
				:class="['ph-dropdown-list',theme?'ph-dropdown-list-'+theme:'']"
				>
				<slot></slot>
			</ph-list>
		</transition>
		<teleport :to="'#'+id" v-else>
			<dropdown-list 
				:align="align"
				:visible="visible"
				:style="style"
				:theme="theme"
				:disabled="disabled"
				:actionsheet="state.actionsheet"
				:title="actionsheetTitle"
				:icon="icon"
				:animation="animation"
				@hide="visible=false"
				>
				<slot></slot>
			</dropdown-list>
		</teleport>
	</div>
</template>
<script lang="ts">
    import { defineComponent, ref, provide, toRef, unref, PropType, reactive, nextTick } from 'vue'
	import { PhButton } from '../base'
	import { PhList } from 'ph-list'
	import { createLayer } from '../../shared/use'
	import getPosition from 'ph-position'
	import DropdownList from './dropdown-list.vue'
	import MediaQuery from 'ph-media'
	export default defineComponent({
		components:{
			PhButton,
			PhList,
			DropdownList
		},
		props:{
			theme:{
				type:String,
				default:"light"
			},
			trigger:{
				type:String,
				default:"click"
			},
			showRightIcon:{type:Boolean,default:true},
			checkActions:{
				type:Array as PropType<Array<string>>,
				default:()=>[]
			},
			animation:{type:String,default:"ph-upbit"},
			shape:String,
			simple:Boolean,
			disabled:Boolean,
			type:String,
			title:String,
			align:String,
			icon:String,
			multiple:Boolean,
			actionsheet:Boolean,
			actionsheetTitle:String
		},
        setup(props,{emit,slots}){
			const { id, layer } = createLayer()

			const state = reactive({
				actionsheet:false,
				hover:props.trigger==="hover"
			})

			const visible = ref(false)
			const edropdown = ref<HTMLElement>()
			const edropdownlist = ref<InstanceType<typeof PhList>>()
			const style = reactive({
				left:"0",
				top:"0"
			})
			const cacheCheckes = ref<Array<string>>(props.checkActions)
			provide('hide',()=>{
				visible.value = false
			})
			provide('multiple',toRef(props,'multiple'))
			provide('cacheCheckes',cacheCheckes)
			provide('dropdownAction',(action:string,checked?:boolean)=>{
				if(props.multiple){
					if(checked)cacheCheckes.value.push(action)
					else cacheCheckes.value = cacheCheckes.value.filter(k=>k!=action)
					emit('action',unref(cacheCheckes))
				}
				else
					emit('action',action)
			})
			const rePosition = ()=>{
				nextTick(()=>{
					const 
						list = (state.hover?edropdownlist.value?.$el:layer.querySelector(".ph-dropdown-list")) as HTMLElement,
						prect = edropdown.value?.getBoundingClientRect() as DOMRect;
					list.style.minWidth = prect.width+"px";
					setTimeout(()=>{
						const {offsetHeight,offsetWidth} = list,
							{x,y} = getPosition({offsetHeight,offsetWidth},prect,{top:!state.hover});
						style.left = x+"px"
						style.top = y+"px"
					})
				})
			}
			const onEnter = ()=>{
				if(!state.hover)return
				visible.value = true
				rePosition()
			}
			const onLeave = ()=>{
				if(state.hover)
				visible.value = false
			}
			const onClick = ()=>{
				if(state.hover)return
				visible.value = !visible.value
				if(visible.value)
					rePosition()
			}

			
			MediaQuery.maxWidth("375px",(matches)=>{
				const items = slots.default?slots.default()[0].children?.length:0;
				state.actionsheet =	props.actionsheet&&matches&&(Number(items)||0)>5;
				state.hover = matches?false:props.trigger==="hover"
			})
            return {
				state,
				id,
				visible,
				style,
				edropdown,
				edropdownlist,
				onEnter,
				onClick,
				onLeave,
				}
        }
	})
</script>
<style lang="scss">
	.ph-dropdown{
		display: inline-block;
		position: relative;
		overflow:visible;
		flex: 0 0 auto;
		font-size:var(--phx);
		.ph-dropdown-handle:not(.ph-action-square){
			position:relative;
			display: block;
			width: 100%;
			padding-right:  var(--ph-20);
		}
	}
</style>